<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>websocket测试</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
<button onclick="onSendButtonClick()">发送</button>
<button onclick="onJhButtonClick()">交互</button>

<div id="content"></div>
</body>
<script type="text/javascript">
  var ws;
  // 检测浏览器是否支持webSocket
  if (typeof(WebSocket) == "undefined") {
    $("#content").html("您的浏览器不支持webSocket！");
    console.log("您的浏览器不支持WebSocket!");
  } else {
    $("#content").html("您的浏览器支持webSocket!");
    console.log("您的浏览器支持WebSocket!");

    //模拟产生clientID
    let clientID = Math.ceil(Math.random()*100);

    // 创建 WebSocket 对象, 注意请求路径！！！！
    ws = new WebSocket("ws://localhost:8080/WebSocketServer/1");

    // 与服务端建立连接时触发
    ws.onopen = function() {
      $("#content").append("<p>与服务端建立连接建立成功！您的客户端ID=" + clientID + "</p>");
      console.log("Socket 已打开");

      //模拟发送数据到服务器
      ws.send("你好服务端！我是客户端 "+clientID);
    };
    // 接收到服务端消息时触发
    ws.onmessage = function(msg) {
      $("#content").append("<p>接收到服务端消息:" + msg.data + "</p>");
      console.log("获得消息：" + msg.data);
      // 发现消息进入, 开始处理前端触发逻辑
    };
    // 关闭事件
    ws.onclose = function() {
      console.log("Socket已关闭");
    };
    // 发生了错误事件
    ws.onerror = function() {
      alert("Socket发生了错误");
      // 此时可以尝试刷新页面
    }
  }

  function onSendButtonClick(){
    console.log("开始发送");
    ws.send("这是来自客户端的消息" + location.href + " " + new Date());
  }

  function onJhButtonClick(){
    $.ajax({
      url: "http://localhost:8080/wms/websocket/push",
      data: { "message" : "我是消息" ,"sid" : "1"},
      type: "post",
      processData: false,
      contentType: false,
      success: function(result) {
        console.log(result);
        alert(result.msg);
      }
    })
  }

</script>
</html>
